<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客</title>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/common.css" th:href="@{/css/common.css}">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../static/lib/toc/tocbot.css" th:href="@{/lib/toc/tocbot.css}">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="../static/js/custom.js" th:src="@{/js/custom.js}"></script>
    <script src="../static/js/comment-form-verify.js"
            th:src="@{/js/comment-form-verify.js}"></script>
    <script src="../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
    <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>

    <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>


    <link rel="stylesheet" href="../static/lib/md/css/editormd.css"
          th:href="@{/lib/md/css/editormd.css}"/>
    <script src="../static/lib/md/lib/raphael.min.js"
            th:src="@{/lib/md/lib/raphael.min.js}"></script>
    <script src="../static/lib/md/lib/underscore.min.js"
            th:src="@{/lib/md/lib/underscore.min.js}"></script>
    <script src="../static/lib/md/lib/marked.min.js" th:src="@{/lib/md/lib/marked.min.js}"></script>
    <script src="../static/lib/md/lib/prettify.min.js"
            th:src="@{/lib/md/lib/prettify.min.js}"></script>
    <script src="../static/lib/md/lib/flowchart.min.js"
            th:src="@{/lib/md/lib/flowchart.min.js}"></script>
    <script src="../static/lib/md/lib/jquery.flowchart.min.js"
            th:src="@{/lib/md/lib/jquery.flowchart.min.js}"></script>
    <script src="../static/lib/md/lib/sequence-diagram.min.js"
            th:src="@{/lib/md/lib/sequence-diagram.min.js}"></script>
    <script src="../static/lib/md/editormd.min.js" th:src="@{/lib/md/editormd.min.js}"></script>
    <script src="../static/js/bottom-nav.js" th:src="@{/js/bottom-nav.js}"></script>
    <script src="../static/lib/toc/tocbot.min.js" th:src="@{/lib/toc/tocbot.min.js}"></script>
</head>

<body>
<!--导航-->
<nav th:replace="fragment_base :: menu(0)" id="nav"
     class="ui inverted attached segment head-tab-padding">
    <div class="ui container">
        <!--stackable 表示可堆叠，自适应-->
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">博客</h2>
            <a class="menu-item item mobile-hide" href="#"><i class="teal code icon"></i>首页</a>
            <a class="menu-item item mobile-hide" href="#"><i class="teal idea icon"></i>分类</a>
            <a class="menu-item item mobile-hide" href="#"><i class="teal tags icon"></i>标签</a>
            <a class="menu-item item mobile-hide" href="#"><i class="teal time icon"></i>归档</a>
            <a class="menu-item item mobile-hide" href="#"><i class="teal info icon"></i>关于我</a>
            <div class="menu-item right item mobile-hide">
                <div class="ui icon transparent inverted input">
                    <input placeholder="搜索..." type="text">
                    <i class="teal search icon"></i>
                </div>
            </div>
        </div>
    </div>
    <!--菜单按钮-->
    <a id="menu-toggle" class=" ui black icon button bar-position mobile-show" href="#">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--中间内容-->
<div class="center-padding">
    <div class="ui container">
        <!--顶部-->
        <div class="ui attached segment">
            <div class="ui  horizontal link list">
                <div class="item">
                    <img th:src="@{${blog.user.avatar}}"
                         class="ui avatar image"
                         src="http://xxstudy.cn/media/img/avatar_15.png"
                         alt="">
                    <div class="content">
                        <a th:text="${blog.user.nickName}" href="#" class="header">唐人</a>
                    </div>
                </div>
                <div class="item">
                    <i class="calendar icon"></i>
                    <span th:text="${#dates.format(blog.updateDateTime,'yyyy-MM-dd')}">  2020-11-21</span>
                </div>
                <div class="item">
                    <i class="eye icon"></i>
                    <span th:text="${blog.lookCount}">1258</span>
                </div>
            </div>
        </div>

        <!--图片-->
        <div class="ui attached header center aligned segment">
            <img th:src="@{${blog.imgUrl}}"
                 class="ui rounded image first-img-max"
                 src="https://developer.android.google.cn/images/android11/11-weeks-of-android-lockup.svg"
                 alt="" style="width: auto">
        </div>

        <!--内容-->
        <div class="ui attached stackable segment">
            <div class="ui basic segment right aligned">
                <div th:text="${blog.flag}?:'原创'" class="ui basic orange label">原创</div>
            </div>

            <!--文章标签-->
            <div class="content-padded-lr-responsive">
                <div th:each="tag:${blog.tags}"
                     th:text="${tag.tagName}"
                     class="ui basic teal left pointing label">Android
                </div>
            </div>

            <!--文章标题-->
            <h2 th:text="${blog.title}" class="ui header center aligned">sleep、wait、join区别</h2>

            <span id="blog-span" th:utext="${blog.content}" style="display: none"></span>
            <div id="blog-content-temp" th:classappend="'toc-content'">
                <textarea style="display: none"></textarea>
            </div>

            <!--打赏-->
            <div class="ui center aligned basic segment" th:if="${blog.appreciateChecked}==true">
                <div id="appreciate" class="ui basic orange circular button ">赞赏</div>
            </div>

            <!--赞赏二维码 默认hidden-->
            <div class="qr-view ui flowing popup transition hidden ">
                <div class="ui orange basic label">
                    <div class="ui images" style="font-size: inherit !important;">
                        <div class="image">
                            <img th:src="@{/img/ali.png}"
                                 class="ui rounded bordered image view-qr-width-zan"
                                 src="../static/img/ali.png"
                                 alt="">
                            <div>支付宝</div>
                        </div>
                        <div class="image">
                            <img th:src="@{/img/wechat.png}"
                                 class="ui rounded bordered image view-qr-width-zan"
                                 src="../static/img/wechat.png"
                                 alt=""
                                 style="width: 11em">
                            <div>微信</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--文章版权信息-->
        <div class="ui attached positive message">
            <div class="ui middle aligned two column grid">
                <div class="ui  column">
                    <ul class="list">
                        <li th:text="|作者：${blog.user.nickName}|">作者：唐人</li>
                        <li th:text="|发表时间：${#dates.format(blog.updateDateTime,'yyyy-MM-dd HH:mm:ss')}|">
                            发表时间：2020-11-21 14:16
                        </li>
                        <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                        <li>公众号转载：请在文末添加作者公众号二维码</li>
                    </ul>
                </div>
                <div class="ui column">
                    <img th:src="@{/img/me_wechat.png}"
                         class="ui right floated rounded bordered image view-qr-width"
                         src="../static/img/me_wechat.png"
                         alt="">
                </div>
            </div>
        </div>

        <!--留言板-->
        <div id="blog-comment" class="ui attached segment">
            <!--留言内容-->
            <div id="comment-container" class="ui teal secondary segment">
                <div th:fragment="commentList">
                    <div class="ui comments">
                        <h3 class="ui dividing header">留言板</h3>
                        <div class="comment" th:each="comment:${commentList}">
                            <a class="avatar">
                                <img th:src="@{${comment.avatar}}" class="ui avatar image"
                                     src="http://xxstudy.cn/media/img/avatar_15.png" alt="">
                            </a>
                            <div class="content">
                                <a th:text="${comment.nickName}" class="author">Matt</a>
                                <div class="ui mini basic teal left pointing label m-padded-mini"
                                     th:if="${comment.adminComment}">博主
                                </div>
                                <div class="metadata">
                                    <span th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm:ss')}"
                                          class="date">今天下午 5:42</span>
                                </div>
                                <div th:text="${comment.content}" class="font-text">太赞了！</div>
                                <div th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickName}"
                                     onclick="reply(this)"
                                     class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>

                            <div class="comments"
                                 th:if="${#arrays.length(comment.replyComments)}>0">
                                <div class="comment" th:each="reply : ${comment.replyComments}">
                                    <a class="avatar">
                                        <img src="https://unsplash.it/100/100?image=1005"
                                             th:src="@{${reply.avatar}}">
                                    </a>
                                    <div class="content">
                                        <a class="author">
                                            <span th:text="${reply.nickName}">小红</span>
                                            <div class="ui mini basic teal left pointing label m-padded-mini"
                                                 th:if="${reply.adminComment}">博主
                                            </div>
                                            &nbsp;<span
                                                th:text="|@ ${reply.parentComment.nickName}|"
                                                class="m-teal">@ 小白</span>
                                        </a>
                                        <div class="metadata">
                                            <span class="date"
                                                  th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                        </div>
                                        <div class="text" th:text="${reply.content}">
                                            How artistic!
                                        </div>
                                        <div class="actions">
                                            <a class="reply" data-commentid="1"
                                               data-commentnickname="Matt"
                                               th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickName}"
                                               onclick="reply(this)">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/*-->
                        <div class="comment">
                            <a class="avatar">
                                <img class="ui avatar image"
                                     src="http://xxstudy.cn/media/img/avatar_15.png"
                                     alt="">
                            </a>
                            <div class="content">
                                <a class="author">Matt</a>
                                <div class="metadata">
                                    <span class="date">今天下午 5:42</span>
                                </div>
                                <div class="font-text">太赞了！</div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img class="ui avatar image"
                                     src="http://xxstudy.cn/media/img/avatar_15.png"
                                     alt="">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">昨天上午12:30</span>
                                </div>
                                <div class="font-text">
                                    <p>這對我的研究是非常有用.謝謝!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                            <div class="comments">
                                <div class="comment">
                                    <a class="avatar">
                                        <img class="ui avatar image"
                                             src="http://xxstudy.cn/media/img/avatar_15.png"
                                             alt="">
                                    </a>
                                    <div class="content">
                                        <a class="author">Jenny Hess</a>
                                        <div class="metadata">
                                            <span class="date">刚刚</span>
                                        </div>
                                        <div class="font-text">艾略特你永远是多么正确 :)</div>
                                        <div class="actions">
                                            <a class="reply">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img class="ui avatar image"
                                     src="http://xxstudy.cn/media/img/avatar_15.png"
                                     alt="">
                            </a>
                            <div class="content">
                                <a class="author">Joe Henderson</a>
                                <div class="metadata">
                                    <span class="date">5 天以前</span>
                                </div>
                                <div class="font-text">老兄，这太棒了。非常感谢。</div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <!--*/-->
                    </div>

                </div>


            </div>

            <!--进行留言-->
            <div id="comment-form" class="ui form" th:if="${blog.commentChecked}">
                <input type="hidden" name="blog.id" th:value="${blog.id}">
                <input type="hidden" name="parentComment.id" value="-1">
                <div class="field">
                    <textarea name="content" placeholder="请输入评论信息..."></textarea>
                </div>
                <div class="fields">
                    <!--姓名-->
                    <div class="field mobile-wide margin-bottom-small-three">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="nickName" placeholder="姓名">
                        </div>
                    </div>

                    <!--邮箱-->
                    <div class="field mobile-wide margin-bottom-small-three">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="text" name="email" placeholder="邮箱">
                        </div>
                    </div>

                    <!--发送-->
                    <div class="field mobile-wide margin-bottom-small-three">
                        <button id="push-comment-btn" class="ui teal button mobile-wide"><i
                                class="telegram plane icon"></i>发表评论
                        </button>
                    </div>
                </div>

            </div>

        </div>

    </div>
</div>

<!--底部导航-->
<div class="bottom-nav">
    <div class="ui vertical icon buttons">
        <button id="doc-btn" class="ui teal button">目录</button>
        <a class="ui icon teal button" href="#blog-comment">留言</a>
        <button id="blog-wechat-qr-btn" class="ui icon button"><i class="wechat icon"></i></button>
        <a class="ui icon button" href="#nav"><i class="angle double up icon"></i></a>
    </div>
</div>

<!--文章目录占位符-->
<div id="placeholder-doc-div" class="ui flowing popup transition hidden"
     style="width: 250px !important;">
    <ol id="placeholder-toc">
    </ol>
</div>

<!--文章二维码占位符-->
<div id="placeholder-qrcode" class="ui flowing popup transition hidden"></div>

<!--底部内容-->
<footer th:replace="fragment_base :: footer" class="ui inverted vertical segment foot-padding">
    <div class="ui center aligned container ">
        <!--grid  分割成 16份-->
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img th:src="@{/img/me_wechat.png}" class="ui rounded image view-qr-width"
                             src="../static/img/me_wechat.png" alt=""/>
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="text-opacity-eight text-space">最新博客</h4>
                <div class="ui inverted link list ">
                    <a class="item" href="#">Android组件化开发...</a>
                    <a class="item" href="#">Activity生命周期详解...</a>
                    <a class="item" href="#">SpringBoot框架搭建...</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="text-opacity-eight text-space">联系我</h4>
                <div class="ui inverted link list">
                    <a class="item" href="#">邮箱：wu_tangren@163.com</a>
                    <a class="item" href="#">QQ：996489865</a>
                    <div class="ui inverted">
                        <a href="#"> <i class="teal github icon"></i></a>
                        <a href="#"> <i class="teal blogger  icon"></i></a>
                    </div>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="text-opacity-eight text-space">简介</h4>
                <p class="text-opacity-six text-space">欢迎大家来到我的博客空间,我是唐人从事Android开发工作.</p>
            </div>
        </div>
        <div class="ui inverted  divider"></div>
        <p class="text-opacity-six text-space">Copyright © 2020 - 2021 PersonalBlog Designed by
            TangRen</p>
    </div>
</footer>

<script th:inline="javascript">
    $(function () {
        $("#comment-container").load(/*[[@{/comment/{id}(id=${blog.id})}]]*/"comments/6");

        const ip = "https://xxstudy.cn";
        const url = /*[[@{/blog/{id}(id=${blog.id})}]]*/"";
        const qrcode = new QRCode("placeholder-qrcode", {
            text: ip + url,
            width: 110,
            height: 110,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });

        $('#blog-wechat-qr-btn').popup({
            popup: $('#placeholder-qrcode'),
            on: 'click',
            position: 'left center'
        })

        const content = document.getElementById("blog-span").innerText;
        $("#blog-content-temp textarea").text(content);
        const testEditormdView = editormd.markdownToHTML("blog-content-temp", {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tocm: true,
            tocContainer: "#placeholder-doc-div",
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
            previewCodeHighlight: true
        });
    })
</script>
</body>
</html>